<template>
  <vue-okr-tree
    :data="testData"
    direction="horizontal"
    show-collapsable
    default-expand-all
    :render-content="renderContent"
  />
</template>

<script>
import { VueOkrTree } from "vue-okr-tree"
import "vue-okr-tree/dist/vue-okr-tree.css"
export default {
  components: {
    VueOkrTree,
  },
  data () {
    return {
      testData: [{
        label: 'xxx科技有有限公司',
        content: '这是一个有活力的公司',
        children: [{
          label: '产品研发部',
          content: '这是一个有活力的产品研发部',
          children: [{
            label: '研发-前端',
            content: '这是一个有活力的研发-前端',
            children: [{
              label: '销售一部',
              content: '这是一个有活力的销售一部',
              children: [{
                label: '销售一部',
                content: '这是一个有活力的销售一部',
                children: [{
                  label: '销售一部',
                  content: '这是一个有活力的销售一部',
                  children: [{
                    label: '销售一部',
                    content: '这是一个有活力的销售一部',
                    children: [{
                      label: '销售一部',
                      content: '这是一个有活力的销售一部',
                      children: [{
                        label: '销售一部',
                        content: '这是一个有活力的销售一部',
                        children: [{
                          label: '销售一部',
                          content: '这是一个有活力的销售一部'
                        }]
                      }]
                    }]
                  }]
                }]
              }]
            }]
          }, {
            label: '研发-后端',
            ontent: '这是一个有活力的研发-后端'
          }, {
            label: 'UI 设计',
            ontent: '这是一个有活力的UI 设计'
          }]
        }, {
          label: '销售部',
          ontent: '这是一个有活力的销售部',
          children: [{
            label: '销售一部',
            content: '这是一个有活力的销售一部'
          }, {
            label: '销售二部',
            ontent: '这是一个有活力的销售二部'
          }
          ]
        }, {
          label: '财务部',
          ontent: '这是一个有活力的财务部'
        }]
      }]
    }
  },
  methods: {
    renderContent (h, node) {
      const cls = ['diy-wrapper', node.isCurrent ? 'current-select' : '']
      return (
        <div class={cls} >
          <div class="diy-con-name">{node.data.label}</div>
          <div class="diy-con-content">{node.data.content}</div>
        </div >
      )
    }
  },
}
</script>